﻿.Foot {
    display: flex; /* Use flexbox for layout */
    flex-wrap: wrap; /* Allow wrapping of flex items */
    justify-content: space-between; /* Space between columns */
    align-items: flex-start; /* Align items to the top */
    padding: 20px; /* Padding around footer */
    border-top: 3px solid #006699; /* Top border for visual separation */
}

.pics_stuff, .Fproduct, .Fservice_carrer, .Fcontact {
    flex: 1 1 200px; /* Flex basis for better responsiveness */
    margin: 10px; /* Margin around each column */
}

    .pics_stuff img {
        max-width: 100%; /* Ensure images are responsive */
        height: auto; /* Maintain aspect ratio */
        display: block; /* Make images block elements */
    }

    .Fproduct, .Fservice_carrer, .Fcontact h2 {
        font-family: Arial, sans-serif; /* Font family */
        color: #006699; /* Heading color */
        margin-bottom: 10px; /* Space below headings */
    }

.FPbutton, a {
    display: block; /* Make buttons block elements */
    margin: 5px 0; /* Space between buttons */
    border: none;
    color: #808080; /* Button text color */
    background-color: transparent; /* Transparent background */
    cursor: pointer; /* Pointer cursor for better UX */
}

    .FPbutton:hover, a:hover {
        text-decoration: underline; /* Underline on hover */
    }

p {
    width: 100%; /* Make paragraph full width */
    margin-top: 10px; /* Space above copyright text */
    font-size: 0.9em; /* Smaller font for copyright */
    font-family: Arial, sans-serif; /* Font family */
    color: #666; /* Text color for copyright */
}

/* Media query for mobile devices */
@media (max-width: 600px) {
    .pics_stuff, .Fproduct, .Fservice_carrer, .Fcontact {
        flex: 1 1 50%; /* Each div takes up the full width for a single column */
    }
}